import { useRef,useState,useEffect } from "react"

const demoList = [
    'https://www.w3schools.com/w3images/fjords.jpg',
    'https://www.w3schools.com/w3images/snow.jpg',
    'https://q7.itc.cn/q_70/images03/20240624/7f6a15ce7fa445c8b618d667bf37fadd.jpeg',
    'https://wx1.sinaimg.cn/mw690/008s5tUHly1hv5g3y9a4ej30jg0jgjz5.jpg',
    'https://q7.itc.cn/q_70/images03/20240503/6a7e76614b8b4b8fbd3c517b98667529.jpeg',
    'https://iknow-pic.cdn.bcebos.com/4bed2e738bd4b31ccbbb152595d6277f9f2ff8ad'
]
function Lazyload(){
    const [imgList,setImgList] = useState(demoList);
  
useEffect(()=>{
      const obs = new IntersectionObserver((inersection)=>{
        for(let item of inersection){
            // console.log('item',item) 
            const {isIntersecting,target} = item;
            if(isIntersecting){
               const url = target.getAttribute('datasrc');
               target.src = url;
               obs.unobserve(target)
            }
        }
    })

   const arr = document.querySelectorAll('.lazy-img')
//    console.log('arr',arr);
   arr.forEach(item=>{
        obs.observe(item)
   })

   return ()=>{
    // obs?.unobserve()
   }

},[])
// 
    return (
        <div>
            <ul>
              {imgList.map(item=>(<li key={item} style={{margin:"10px", minHeight:'266px',border:"1px solid green"}}>
                <img dataSrc={item}  className="lazy-img"></img>
              </li>))}  
            </ul>
        </div>

    )
}
export default Lazyload 